<template>
  <div class="container">
    <h3 style="margin-left:48%">教学视频</h3>
    <div class="video_box">
      <div class="video_center">
        <div class="resource-container" style="width:80%;position:relative;">
          <div class="video-title">{{ activeVideoName }}</div>
          <template>
            <video
              ref="video"
              id="video"
              :autoplay="videolist.autoplay"
              :controls="videolist.controls"
              :controlslist="videolist.controlslist"
              :webkit-playsinline="webkitplaysinline"
              style="width:100%;height:100%;"
            >
              <source :src="activeUrl" type="video/mp4" />
            </video>
          </template>
        </div>
        <div
          style="width:20%;border-radius:10px;border: 1px solid grey;margin-left:10px;border-bottom:none;border-top:none"
          class="video_right"
        >
          <p style="padding:1rem;">视频目录</p>
          <ul>
            <li
              v-for="(item, index) in videoInfo"
              :key="index"
              style="cursor:pointer;padding:10px;color:grey"
              :class="activeIndex == index + '' ? 'video-active' : ''"
              @click="getCurrentVideo(item, index)"
            >
              {{ item.oldname }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      :title="examName"
      :visible.sync="questionDialog"
      :close-on-click-modal="false"
      center
    >
      <el-form v-model="questionForm">
        <el-form-item>
          <div>
            <p>题目内容：</p>
            <p>
              <b>{{ questionForm.question }} </b>
            </p>
          </div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="questionForm.answer"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="handleUpdate()"
          >提 交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import final from "./final.vue";
export default {
  components: {
    final,
  },
  data() {
    return {
      videolist: {
        autoplay: false, // 自动播放
        controls: "controls", //操作
        controlslist: "nodownload ",
        /*
        1、nodownload: 不要下载按钮
        2、nofullscreen: 不要全屏按钮
        3、noremoteplayback: 不要远程回放
        4、disablePictureInPicture 不要画中画按钮
        5、noplaybackrate 不要播放速度按钮
        */
      }, //video配置
      webkitplaysinline: "true",
      playHistory: {
        resourceIndex: -1,
        currentFileIndex: -1,
        currenTime: 0,
      }, //初始化时定位到的历史播放记录
      videoPlayer: null,
      activeIndex: "0", //右侧课程选择切换背景色
      currentResource: {}, //当前的资源
      videoInfo: [
        {
          id: 1,
          videoName: "寄存器概述.mp4",
          url: "",
        },
        {
          id: 2,
          videoName: "Vue生命周期概述.flv",
          url: "",
        },
      ],
      // 当前播放的视频链接
      activeUrl:
        "http://v.stu.126.net/mooc-video/nos/mp4/2017/10/22/1007382338_a0b5c3e851e44c8898cfd9482ab4b79b_hd.mp4?ak=99ed7479ee303d1b1361b0ee5a4abcee30446d0be87619aa46bdf31a17d31c7664e6633175eefc6b1001c1c5db748550aa73f4530fd99b235c1ca7335037692f0015e48ffc49c659b128bfe612dda086d65894b8ef217f1626539e3c9eb40879c29b730d22bdcadb1b4f67996129275fa4c38c6336120510aea1ae1790819de86e0fa3e09eeabea1b068b3d9b9b6597acf0c219eb000a69c12ce9d568813365b3e099fcdb77c69ca7cd6141d92c122af",
      // 当前播放的视频名称
      activeVideoName: "寄存器概述.mp4",
      // 问题插入时间
      questionTime: 0,
      // 问题对话框
      questionDialog: false,
      form: {
        id: "",
      },
      questionForm: {
        question: "",
        answer: "",
      },
    };
  },
  mounted() {
    this.querylist();
    this.getVideoList();
    this.form.id = parseInt(localStorage.getItem("rid")) + 1;
  },
  methods: {
    //获取视频列表
    getVideoList() {
      this.$http
        .post(`${this.systemURL}/problem/videoList`, this.form)
        .then((res) => {
          console.log("视频：", res.data.data);
          this.videoInfo = res.data.data;
        });
    },
    // 获取当前视频的url
    getCurrentVideo(item, index) {
      // sessionStorage.setItem('arrylistId',id)
      sessionStorage.setItem("currentTime", 0);
      sessionStorage.setItem("duration", 0);
      this.activeIndex = index;
      // this.activeUrl = item.url;
      this.$refs.video.src = item.url;
      this.activeVideoName = item.oldname;
      console.log("当前视频名称：", item.oldname);
      var videoName = item.oldname;
      // this.$http.post("http://192.168.43.56:8012/getProblem",videoName).then( res =>{
      //   console.log(res);
      // })
      console.log("视频：", item);
      axios({
        method: "post",
        url: `${this.systemURL}/problem/queryVPL`,
        data: item,
      }).then((res) => {
        console.log("时间：", res.data.data[0].time.slice(-1));
        this.questionTime = res.data.data[0].time.slice(-1);
        // TODO
        this.questionForm.question = res.data.data[0].questionTitle;
        // console.log(res.data.content[0].time.slice(-1));
      });
    },
    querylist() {
      this.$nextTick(() => {
        this.initVideoplayer();
        this.fileTimelengthRecord();
      });
    },
    initVideoplayer() {
      if (!this.videoPlayer && this.$refs.video) {
        this.videoPlayer = this.$refs.video;
        // 视频进度改变 -- 播放即触发
        this.videoPlayer.addEventListener("timeupdate", (e) => {
          // console.log(this.videoPlayer.currentTime,'currentTime') //当前播放进度
          // console.log(this.videoPlayer.duration,'duration') //当前播放进度
          let s = Math.floor(this.$refs.video.currentTime); //获取当前播放时间
          var videoTime = document.getElementById("video");
          var i = 0;
          console.log("停止时间：", this.questionTime);
          if (s == this.questionTime && s != 0) {
            setTimeout(() => {
              videoTime.pause();
              this.questionDialog = true;
            }, 800);
            i++;
          }

          sessionStorage.setItem("currentTime", this.videoPlayer.currentTime);
          sessionStorage.setItem("duration", this.videoPlayer.duration);
        });

        //视频暂停 --  点击暂停（退出也会触发并记录时间）
        this.videoPlayer.addEventListener("pause", (e) => {
          // this.fileTimelengthRecord(this.videoPlayer.currentTime,this.videoPlayer.duration)
        });

        // // 进度拖动
        // this.videoPlayer.addEventListener('seeking',(e) => {
        //   console.log(this.videoPlayer.currentTime,'seeking进行拖动')
        // })

        // // 进度拖动（进度条拖动会先 pause --> seeked--->play）
        // this.videoPlayer.addEventListener('seeked',(e) => {
        //   console.log(this.videoPlayer.currentTime,'seeked进行拖动')
        // })

        // 播放监听
        this.videoPlayer.addEventListener("play", (e) => {});

        // 结束监听
        this.videoPlayer.addEventListener("ended", (e) => {
          console.log(this.videoPlayer.currentTime, "ended 播放完成");
        });

        //禁止快进
        let sym;
        setInterval(() => {
          let time = this.videoPlayer.currentTime;
          if (time - sym > 1) {
            this.videoPlayer.currentTime = sym;
          }
          sym = this.videoPlayer.currentTime;
        }, 500);
      }
    },
    // 进度记录更新 - 记录当前播放附件的时长
    fileTimelengthRecord() {
      let stat = sessionStorage.getItem("currentTime");
      let end = sessionStorage.getItem("duration");
      if (stat > 0) {
        this.ifopen();
      } else {
        this.videoPlayer.currentTime = 0;
      }
    },
    ifopen() {
      this.$confirm("是否从上次的记录开始播放?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let stat = sessionStorage.getItem("currentTime");
          this.videoPlayer.currentTime = stat;
          this.videoPlayer.play();
        })
        .catch(() => {
          this.videoPlayer.currentTime = 0;
          this.videoPlayer.pause();
        });
    },
    // 问题完成后继续播放
    handleUpdate() {
      this.questionDialog = false;
      var videoTime = document.getElementById("video");
      videoTime.play();
    },
  },
};
</script>

<style scoped>
.video_box {
  margin: 0 auto;
  margin-top: 50px;
  width: 1450px;
  height: 640px;
  border: 1px solid rgb(0, 0, 0);
  background: rgb(0, 0, 0);
  border-radius: 10px;
}
.video_center {
  margin: 20px auto;
  width: 1400px;
  height: 600px;
  background: #000000;
  display: flex;
  justify-content: space-between;
}
.video-title {
  width: 95%;
  display: none;
  padding: 1rem;
  position: absolute;
  top: 0;
  color: #fff;
  background-color: rgb(6, 6, 6, 0.3);
  z-index: 2;
}
.resource-container:hover .video-title {
  display: block;
}
.video_right > p {
  background-color: rgb(6, 6, 6, 0.3);
  color: #fff;
}
.video-active {
  background-color: rgb(6, 6, 6, 0.3);
  color: #409eff !important;
}

/* 全屏按钮 */
/* video::-webkit-media-controls-fullscreen-button {
        display: none;
    } */
/* 播放按钮 */
/* video::-webkit-media-controls-play-button {
        display: none;
    } */
/* 进度条 */
/* video::-webkit-media-controls-timeline {
        display: none;
    } */
/* 观看的当前时间 */
/* video::-webkit-media-controls-current-time-display{
        display: none;            
    } */
/* 剩余时间 */
/* video::-webkit-media-controls-time-remaining-display {
        display: none;            
    } */
/* 音量按钮 */
/* video::-webkit-media-controls-mute-button {
        display: none;            
    } */
/* video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;            
    } */
/* 音量的控制条 */
/* video::-webkit-media-controls-volume-slider {
        display: none;            
    } */
/* 所有控件 */
/* video::-webkit-media-controls-enclosure{ 
        display: none;
    } */
</style>
